<template>
  <div class="component-container">
    <div class="component-title-wrapper">
      <div class="component-title">
        <span class="title-breadcrumb">权限设置</span>
      </div>
    </div>
    <div class="component-body-wrapper">
      <el-form label-width="120px">
        <div v-for="item in authData" :key="item.id">
          <el-form-item :label="item.name+'：'">
            <div class="select-btn" @click="selectAuthPeople(item, 300)"><span><i class="el-icon-plus"></i></span>添加</div>
            <div v-for="(people, index) in item.people" :key="people.emplId">
              <div class="select-btn" style="padding: 0;" @click="delMember(item, index)">{{people.name}}<div class="del">移除</div></div>
            </div>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import dingMixin from  '@/mixins/ding'
import formUtil from '@/utils/formUtil'
export default {
  data () {
    return {
      authData: [{
        name: '管理员',
        id: '1311210362356432897',
        people: []
      },{
        name: '邮件管理员',
        id: '1328502655740379138',
        people: []
      },{
        name: '观察者',
        id: '1311210442408919042',
        people: []
      }],
    };
  },
  components: {},
  mixins: [dingMixin],
  async mounted () {
    this.authData.forEach(async (item) => {
      item.people = await this.$httpN.postQ('sys/user/listUserByRoleId', {roleId: item.id});
    })
  },
  methods: {
    selectAuthPeople(row){
      this.complexPicker(100, [], row.people.map(item => item.emplId)).then(async (data)=>{
        let ids = data.map(item => item.emplId);
        if(! await this.$httpN.postQ('sys/user/setUserRole', {roleId: row.id, dingIds: ids.join(',')})) return;
        formUtil.submitSuccess('保存成功');
        row.people = await this.$httpN.postQ('sys/user/listUserByRoleId', {roleId: row.id});
      })
    },
    async delMember(item, index) {
      if(item.people.length <= 1) return this.$message.error('至少包含一个人员');
      item.people.splice(index, 1); 
      let ids = item.people.map(item => item.emplId);
      if(! await this.$httpN.postQ('sys/user/setUserRole', {roleId: item.id, dingIds: ids.join(',')})) return;
      formUtil.submitSuccess('保存成功');
      row.people = await this.$httpN.postQ('sys/user/listUserByRoleId', {roleId: item.id});
    }
  }
}
</script>

<style lang='scss' scoped>
.component-container {
  min-width: 500px;
  padding-bottom: 40px;
  .component-title-wrapper {
    font-size: 12px;
    color: rgb(102, 102, 102);
    height: 64px;
    line-height: 64px;
    padding: 0 16px;
    .component-title {
      border-bottom: 1px solid #ecedee;
      .title-breadcrumb {
        font-weight: bolder;
        font-size: 16px;
        padding: 0 10px;
        font-weight: bolder;
        display: inline-block;
        position: relative;
        &::before {
          position: absolute;
          content: "";
          left: 0;
          top: 50%;
          width: 4px;
          height: 20px;
          margin-top: -10px;
          background: #0070cc;
        }
      }
    }
  }
  .component-body-wrapper {
    padding: 0 16px;
    height: 100%;
    padding: 20px 0;
    overflow: auto;
    .select-btn{
      float:left;
      font-weight: normal;
      margin-right: 5px;
      margin-bottom: 10px;
      width: 80px;
      height: 28px;
      border-radius: 30px;
      background: #FAFAFA;
      border: 1px solid #ECECEC;
      position: relative;
      padding-left: 21px;
      line-height: 28px;
      color: #7982A7;
      font-size: 12px;
      text-align: center;
      cursor: pointer;
      span{
        position: absolute;
        top: 1px;
        left: 1px;
        display:block;
        height: 24px;
        width: 24px;
        background: #CACACA;
        color: white;
        border-radius: 50%;
        text-align: center;
        line-height: 24px;
        img{
          width: 24px;
          height: 24px;
          border-radius: 50%;
        }
      }
      .del{
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 30px;
        color: white;
        text-align: center;
        background:rgba(130, 130, 130, 0.9);
        display: none;
      }
      &:hover{
        .del, .close{
          display: block;
        }
      }
    }
  }
}
</style>